<template>

	<!-- 知识星球加入详情页面 -->
	<view class="main">
		<view class="header">

			<uni-row class="demo-uni-row">
				<uni-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1" class="header_information">
					<view class="img">
						<image :src="planet.plantPic" style="height: 150rpx;object-fit: cover;" mode="heightFix">
						</image>
					</view>
				</uni-col>
				<uni-col :xs="16" :sm="18" :md="40" :lg="40" :xl="20" class="header_information">
					<view class="text">{{planet.name}}</view>
				</uni-col>
			</uni-row>
		</view>

		<view class="center">
			<uni-section title="星球介绍" padding="0 10rpx 10rpx 20rpx " title-font-size="35rpx" type="line"
				style="font-weight: 200;margin-bottom: 40rpx;box-shadow: 10rpx 5rpx 10rpx #b9b9b9;width: 97%;border-top: 0.5rpx solid #c5c5c5;">
				<template v-slot:right style="font-size: xx-small;">
					<uni-icons type="phone" size="10"></uni-icons>投诉
				</template>
				<!-- 星球介绍，由用户自己定义 -->
				<view class="information">关于我们的星球:</view>
			</uni-section>

			<!-- 星主 -->
			<uni-section title="星主" padding="20rpx 10rpx 10rpx 20rpx " title-font-size="35rpx"  type="line" 
				style="font-weight: 200;box-shadow: 10rpx 5rpx 10rpx #b9b9b9;width: 97%;border-top: 0.5rpx solid #c5c5c5;">
				<view style="width: 100%;height: 80rpx;display: flex;
									align-items: center;">
					<view
						style="width: 100rpx;height: 100rpx;border-radius: 50%;border: 0.5rpx #7d7f78 solid;margin-right: 5%;display: flex;justify-content: center;align-items: center;overflow: hidden;">
						<image :src="planet.avatar" style="object-fit: cover;height: 100rpx;" mode="heightFix"></image>
					</view>
					<text style="font-weight: 600;">{{planet.nickName}}</text>
				</view>
			</uni-section>

			<!-- 是否使用优惠卷 -->

			<uni-section title="优惠卷" title-font-size="35rpx" type="line"
				style="font-weight: 200;box-shadow: 10rpx 5rpx 10rpx #b9b9b9;width: 97%;border-top: 0.5rpx solid #c5c5c5;color: orange;">
				<uni-collapse-item title="抢购优惠卷" titleBorder="true" >
					<view style="width: 100%;">
						
						<radio-group style="width: 100%;height: 100%;display: flex;justify-content: space-evenly; flex-wrap: wrap; " @change="chooseD">
							<view class="juan"  v-for="item in cinfo"> 
								<view class="jl">{{item.name}}立减<text style="color: #ff4f23;">{{item.price}}</text>元</view>
								<view class="jc">
									<radio color="#99ff8e" :value="item.id" :data-id="item.price"></radio>
								</view>
							</view>
						</radio-group>
					</view>
				</uni-collapse-item>
				
				<uni-collapse-item title="请选择优惠卷" titleBorder="true" >
					<view style="width: 100%;">
						
						<radio-group style="width: 100%;height: 100%;display: flex;justify-content: space-evenly; flex-wrap: wrap; " @change="chooseC">
							<view class="juan"  v-for="item in myCInfo"> 
								<view class="jl">{{item.name}}立减<text style="color: #ff4f23;">{{item.price}}</text>元</view>
								<view class="jc">
									<radio color="#99ff8e" :value="item.id" :data-id="item.price"></radio>
								</view>
							</view>
						</radio-group>
					</view>
				</uni-collapse-item>
			</uni-section>
			
			
			


			<!-- 付费须知 -->
			<uni-section title="付费须知" padding="0rpx 10rpx 10rpx 20rpx " title-font-size="35rpx"
				style="font-weight: 200; margin-top: 40rpx;box-shadow: 10rpx 5rpx 10rpx #b9b9b9;width: 97%;border-top: 0.5rpx solid #c5c5c5;" type="line">
				<view style="width: 100%;"></view>
				<view style="display: flex;flex-direction: row;margin-bottom: 30rpx;">
					<!-- <uni-title type="h3" title="1." style="height: 10rpx;width: 40rpx;"></uni-title> -->
					<view class="title_text">1.</view>
					<view style="color:#838383">本次付费的价格为<text
							style="color: orange;font-weight: 600;">{{planet.price}}</text>元,加入星球后，你可以在72小时之内申请退款，同时你需要阅读《知识星球用户协议》
					</view>
				</view>
				<view style="display: flex;flex-direction: row;margin-bottom: 30rpx;">
					<view class="title_text">2.</view>
					<view style="color:#838383">本星球为星主用户自行创建，加入前请确认风险，本平台不提供相关保证。如发现有违法违规星球，请勿加入，并投诉</view>
				</view>
				<view style="display: flex;flex-direction: row;margin-bottom: 30rpx;">
					<view class="title_text">3.</view>
					<view style="color:#838383">付费后，你可以进入本星球加入群聊， </view>
				</view>
			</uni-section>

		</view>



		<!-- 底部栏 -->
		<view class="bottom">
			<view style="position: fixed;bottom: 40rpx;font-size: 40rpx;font-weight: 900;color: #7d7f78;">
				￥{{planet.price}}</view>
			<button class="bottom_B" type="default" @click="join" :data-price="planet.price">加入我们</button>
		</view>
		
		<view style="height: 200rpx;"></view>


		<!-- 弹出框同时付款 -->
		<uni-popup ref="popup">
			<view class="popup">
				<view class="ph">通知</view>
				<view class="pc">本次加入星球将会收取<text style="color: orange;font-weight: 600;">{{planet.price - price}}</text>元</view>
				<view class="pb">
					<view class="pbb" style="border-right: #c2c5ba 0.5rpx solid;" hover-class="pbc" @click="close">取消
					</view>
					<view class="pbb" hover-class="pbc" @click="sumbit">确定</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import request from '@/common/request.js'

	export default {
		data() {
			return {
				planet: null,
				cinfo:null,//优惠卷
				cId:null,//选中优惠卷id
				dId:0,
				price:0,
				myCInfo:null,//我的优惠卷
				userId:null
			}
		},
		methods: {
			join(e) {
				var price = e.currentTarget.dataset.price
				this.$refs.popup.open('center')
			},
			close() {
				this.$refs.popup.close()
			},
			sumbit() {
				console.log(this.planet.id);
				const data = {
					couponsId: null,
					isCoupons: 0,
					planetId: this.planet.id
				}
				request('/plant/joinPlanet', data, 'POST').then((res) => {
					console.log(this.planet);
					uni.navigateTo({
						url: '/pages/View/planet/geren?id=' + this.planet.id + '&image=' + this.planet.plantPic +'&planetName=' + this.planet.name 
					})
				})
			},
			//抢购优惠卷
			chooseD(e){
				this.dId=e.detail.value
				const data=
					{
					  couponsId: this.dId,
					  pantId: this.planet.id,
					  userId: this.userId
					}
				request('/coupons/snapup',data,'POST').then((res)=>{
					console.log(res);
				})
			},
			chooseC(e){
				this.price=0
				this.cId=e.detail.value
				var i=0
				for(i;i<this.cinfo.length;i++){
					if(this.cinfo[i].id==this.cId){
						this.price=this.cinfo[i].price
					}
				}
			},
			one(){
				const user=uni.getStorageSync('userInfo');
				this.userId=user.id
				request('/coupons/getMe/'+user.id,'','GET').then((res)=>{
					this.myCInfo=res
				})
			}
		},
		onLoad(option) {
			this.one()
			const value = uni.getStorageSync('planet');
			this.planet = value
			request('/coupons/get/'+value.id,'','GET').then((res)=>{
				this.cinfo=res
			})
		}
	}
</script>

<style>
	.main {
		width: 100%;
		height: 100%;
		background-color: white;
	}

	.header {
		width: 100%;
		height: 400rpx;
		border-bottom: 0.5rpx #d4d4d4 solid;
		background: linear-gradient(to top, #c5c5c5, #ebebeb, #ebebeb);
	}

	.demo-uni-row {
		margin-bottom: 10px;
		/* QQ、字节小程序文档写有 :host，但实测不生效 */
		/* 百度小程序没有 :host，需要设置block */
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
	}


	.header_information {
		height: 400rpx;
		background: linear-gradient(to top, #c5c5c5, #ebebeb, #ebebeb);
	}

	/* 星球图片 */
	.img {
		height: 150rpx;
		width: 150rpx;
		background-color: black;
		margin-top: 125rpx;
		margin-left: 20%;
		border-radius: 20rpx;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 星球描述 */
	.text {
		display: flex;
		flex-direction: column;
		justify-content: center;
		font-weight: 800;
		font-size: 50rpx;
		margin-top: 125rpx;
		align-items: center;
		height: 150rpx;
		border-left: #c5c5c5 0.5rpx solid;
		border-right: #c5c5c5 0.5rpx solid;
		margin-right: 50rpx;
	}

	.bottom {
		width: 100%;
		height: 120rpx;
		position: fixed;
		bottom: 0rpx;
		background-color: #f1f1f1;
	}

	.bottom_B {
		width: 300rpx;
		height: 80rpx;
		background: linear-gradient(to right, #eaeaea, #dadada);
		position: fixed;
		margin-top: 20rpx;
		right: 20rpx;
	}


	/* 中间栏 */
	.center {}

	.information {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		font-weight: 100;
	}

	.admin {
		width: 100%;
		height: 150rpx;
		background-color: #c5c5c5;
	}

	.title_text {
		font-size: 30rpx;
		font-weight: 500;
		color: #c5c5c5;
	}

	.popup {
		width: 500rpx;
		height: 350rpx;
		border-radius: 4%;
		background-color: white;
		overflow: hidden;
	}

	.ph {
		width: 100%;
		height: 20%;
		background-color: antiquewhite;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.pc {
		width: 100%;
		height: 58%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
	}

	.pb {
		width: 100%;
		height: 22%;
		border-top: 0.5rpx solid #d8d8d8;
		display: flex;
	}

	.pbb {
		width: 50%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.pbc {
		width: 50%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #d4d4d4;
	}

	.juan {
		width: 45%;
		height: 100rpx;
		margin-bottom: 20rpx;
		display: flex;
		border-radius: 10rpx;
		overflow: hidden;
		border:0.1rpx solid #b3b3b3;
		
	}
	
	.jl{
		height: 100%;
		width: 75%;
		background-color: #c5c5c5;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		font-weight: 700;
	}
	
	.jc{
		width: 25%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		
	}
</style>